


import { useMount  , useTitle} from 'ahooks'
import React, { FC , useEffect, useRef, useState  } from 'react'
import './index.scss'
import IMG from '@/assets/images/404.png'
import { history } from 'umi'
import { useCountDown } from 'ahooks';
import { useTimeDownCounter } from '@/hooks/common'
import { numTypes, spanTypes } from '@/utils/type'




const NotFound:FC  = () => {
    const bgstar = useRef<any>()
    const [spanList,setSpanList] = useState<Array<spanTypes>>([])
    let [count,setCount] = useState<number>(5)
    let timer:any  = null;
    const timeDown = ()=>{
        timer = setInterval(()=>{
            if(count>0){
                setCount(count--)
            }else{
                clearInterval(timer)
                timer = null;
                setCount(5)
                history.push('/app')
            }
        },1000)
    }

    const [targetDate, setTargetDate] = useState<number>();
    const [countdown] = useCountDown({
        targetDate: targetDate,
        onEnd(){
            console.log('onEnd')
            history.push("/app")
        }
    });

    const [counter] = useTimeDownCounter()


    const spanListInit = ()=>{
        const width = bgstar.current.clientWidth
        const height:any  = document.getElementById('bgstar')?.clientHeight 

        for(var i = 0;i< 520; i++){
            var left:numTypes = Math.random() * width;
            var top:numTypes = Math.random() * height;
    
            var scaler = Math.random()  * 1.5;
            var rate = Math.random() * 2.5 
            var opacity = Math.random() * 1;
    
            spanList.push({
                left:left+'px',
                top:top+'px',
                transform:`scale(${scaler})`,
                animationDelay:rate+'s',
                background:`rgba(255,255,255,${opacity})`
            })
        }

        setSpanList([...spanList])
    }

    // 组件载入 onMounted 
    // 组件数据更新 onUpdated 
    // 组件销毁   onUnMounted 

    // useEffect watch 监听数据 
    useEffect(()=>{
        console.log("onMounted")
        // timeDown()
        // setTargetDate(Date.now() + 5000)
        spanListInit()
        return ()=>{
            console.log('组件销毁   onUnMounted ')

            clearInterval(timer)
            timer = null;
        }
    },[])


    return (
        <div id="bgstar" className='errorpage' ref={bgstar} style={{position:'absolute',top:0,left:0,width:'100%',height:'100%'}}>
            <div className='down' onClick={ ()=>history.push('/app') } > { counter } S 跳转</div>
            <img src={IMG}  className='myimg' alt="" />
            {
                spanList.map((item,index)=>{
                    return (
                        <span className='spandot' key={index} style={item} ></span>
                    )
                })
            }
        </div>
    )
}

export default NotFound